<template>
  <div class="page-box">
    <van-nav-bar class="detail_top" fixed @click-left="pageMethod.onClickLeft">
      <template #left>
        <van-icon name="arrow-left" color="#fff" size="16" />
      </template>
      <template #title>
        <div class="detail_top_title">用车</div>
      </template>
    </van-nav-bar>
    <div class="top">
      <div class="map-box">
        <div class="map-container" :id="pageData.ids"></div>
        <div
          v-if="pageData.isNative == '1'"
          @click="pageMethod.setPosition"
          class="posMine"
        >
          <img
            src="https://a.amap.com/jsapi/static/image/plugin/waite.png"
            v-show="pageData.posLoding"
          />
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="botton-card">
        温馨提示：现在还是疫情防控关键时期，请您务必佩戴口罩出行。
      </div>
      <div class="bottom-cont">
        <van-tabs
          v-model:active="pageData.active"
          @click-tab="pageMethod.onClickTab"
          sticky
        >
          <van-tab
            v-for="(item, i) in pageData.tabs"
            :key="i + 'tab'"
            :title="item.name"
          >
            <keep-alive>
              <component
                :is="item.comp"
                :type="item.prop"
                :notFinishedOrder="pageData.notFinishedOrder"
                :tab="pageData.active"
              ></component>
            </keep-alive>
          </van-tab>
        </van-tabs>
      </div>
      <div class="unfinishedOrder-box" v-if="pageData.notFinishedOrder">
        <van-cell-group>
          <van-cell icon="bell" title-class="unfinishedOrder-title">
            <template #title>
              <span
                >您存在未完成订单，须完成后，再用车
                <span class="custom-title" @click="pageMethod.linkOrder"
                  >(点击查看)</span
                >
              </span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <carFooter></carFooter>
    </div>
  </div>
</template>

<script setup>
import {
  initMapSmall,
  getLocationCity
} from "/@/assets/map/searchCarMap/map-config.js";
import carFooter from "./components/carFooter.vue";

import {
  reactive,
  getCurrentInstance,
  onMounted,
  defineAsyncComponent,
  markRaw
} from "vue";
const { proxy } = getCurrentInstance();
const carOther = markRaw(
  defineAsyncComponent(() => import("./components/carOther.vue"))
);

const pageData = reactive({
  active: 0,
  iframeUrl: "",
  isNative: sessionStorage.isNative,
  posLoding: false,
  ids: `map-container${new Date().getTime()}`,
  notFinishedOrder: null,
  tabs: [
    {
      name: "立即用车",
      comp: carOther,
      prop: "1"
    },
    {
      name: "预约用车",
      comp: carOther,
      prop: "2"
    },
    {
      name: "接机",
      comp: carOther,
      prop: "3"
    },
    {
      name: "送机",
      comp: carOther,
      prop: "4"
    }
  ]
  // iframeUrl: `https://m.amap.com/picker/?keywords=写字楼,小区,航站楼&zoom=15&center=116.470098,39.992838&radius=1000&total=20&key=${proxy.$store.state.MapKey}`
});
const pageMethod = {
  onClickTab() {
    console.log(arguments);
  },
  onClickLeft() {
    if (sessionStorage.isNative == "1") {
      JSBridge.call("popWindow");
      return false;
    }
    proxy.$router.back();
  },
  setPosition() {
    pageData.posLoding = true;
    getLocationCity(() => {
      pageData.posLoding = false;
    });
  },
  async getNotFinishedOrder() {
    const res = await proxy.$axiosJson(
      "/security/v1/icardcOrder/queryNotFinishedOrder",
      {}
    );
    const data = res.data || {},
      order_id = data.order_id == "null" ? null : data.order_id;
    pageData.notFinishedOrder = order_id;
  },
  linkOrder() {
    if (sessionStorage.isNative == "1") {
      JSBridge.call("pushCarOrderDetail", {
        order_id: pageData.notFinishedOrder
      });
      return false;
    }
    proxy.$router.push({
      path: "/CarOrderDetail",
      query: { id: pageData.notFinishedOrder }
    });
  }
};
const mapData = reactive({
  AMap: null,
  AMapUI: null,
  map: null
});
const mapMethod = {
  initMap() {
    initMapSmall(pageData.ids, [])
      .then(({ AMap, AMapUI, map }) => {
        mapData.AMap = AMap;
        mapData.AMapUI = AMapUI;
        mapData.map = map;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
onMounted(() => {
  mapMethod.initMap();
  pageMethod.getNotFinishedOrder();
});
</script>

<style lang="less" scoped>
.page-box {
  .map-container {
    :deep(.amap-copyright),
    :deep(.amap-logo) {
      z-index: 0;
      display: none !important;
    }
  }
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  padding-top: 1.22667rem;
  .top {
    height: 40%;
    .map-box {
      width: 100%;
      height: 100%;
      position: relative;
      .map-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .posMine {
      bottom: 15px;
      right: 15px;
      height: 32px;
      width: 32px;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 0 5px silver;
      cursor: pointer;
      background-image: url(https://a.amap.com/jsapi/static/image/plugin/locate.png);
      background-size: 24px;
      background-repeat: no-repeat;
      background-position: 50%;
      position: absolute;
      -webkit-tap-highlight-color: transparent;
      img {
        height: 24px;
        width: 24px;
        background-color: #fff;
        margin: 4px;
        border-radius: 50%;
        -webkit-animation: rotate 2s linear infinite;
        max-width: none !important;
        max-height: none !important;
        vertical-align: middle;
        border: 0;
      }
    }
  }
  .bottom {
    position: relative;
    min-height: 60%;
    overflow: auto;
    background: #f1f1f1;
    padding: 0 10px;
    padding-bottom: 70px;
    .botton-card {
      border-radius: 18px;
      position: absolute;
      width: 100%;
      height: 300px;
      font-size: 12px;
      line-height: 45px;
      left: 0;
      z-index: 1;
      color: #333333;
      padding: 0px 10px;
      background: -webkit-linear-gradient(
        #e3edfe,
        #f1f1f1
      ); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(#e3edfe, #f1f1f1); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(#e3edfe, #f1f1f1); /* Firefox 3.6 - 15 */
      background: linear-gradient(
        #e3edfe,
        #f1f1f1
      ); /* 标准的语法(必须放在最后) */
    }
    :deep(.van-tab--active) {
      font-weight: bold;
    }
    .bottom-cont {
      margin-top: 40px;
      background: #ffffff;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      z-index: 10;
    }
  }
}
.detail_top {
  :deep(.van-nav-bar__content) {
    background-color: #3296fa;
    color: #ffffff;
    font-weight: 600;
    .detail_top_title {
      font-size: 16px;
      color: #ffffff;
      font-weight: 600;
    }
    .detail_top_agin {
      font-size: 14px;
      font-weight: 600;
    }
  }
}
.unfinishedOrder-box {
  margin-top: 15px;
  border-radius: 10px;
  overflow: hidden;
  :deep(.van-cell) {
    padding-left: 0.15rem;
    padding-right: 0;
  }
  :deep(.van-icon) {
    color: #f36447;
  }
  :deep(.unfinishedOrder-title) {
    cursor: pointer;
    color: #f36447;
    .custom-title {
      color: #1a6eff;
    }
  }
}
</style>
